<template>
  <div class="teach-study">
    <ul class="title">
      <li>
        <h4 style="padding-left: 1em;">最新上架</h4>
      </li>
      <li>
        <a href="#" style="padding-right: 1em;" @click.prevent="more">更多</a>
      </li>
    </ul>
    <ul class="cont">
      <li v-for="(item,i) in detailsList" :key="i">
        <List1 :book="item"/>
      </li>
    </ul>
    <!--    <ul class="title2">-->
    <!--      <li>-->
    <!--        <h4>惠香书屋系列图书</h4>-->
    <!--      </li>-->
    <!--      <li>-->
    <!--        <a href="#">更多</a>-->
    <!--      </li>-->
    <!--    </ul>-->
    <!--    <ul class="cont">-->
    <!--      <li v-for="(item,i) in detailsList" :key="i">-->
    <!--        <img :src="item.imgurl" alt="">-->
    <!--        <List2 :title="item.title" :price="item.price" :num="item.num"  />-->
    <!--      </li>-->
    <!--    </ul>-->
  </div>
</template>

<script>
import List1 from "@/views/home/teach_list/components/List1";
// import List2 from "@/views/home/teach_list/components/List2";
export default {
  name: "TeachingAndLearning",
  data() {
    return {
      detailsList: [],
      bookQuery: {
        pageSize: 8
      }
    }
  },
  methods: {
    more() {
      this.$router.push({
        path: '/paybook',
        query: {
          sort: 'new'
        }
      })
    }
  },
  components: {
    List1,
    // List2

  },
  created() {
    this.getRequest('/p/pms/book/list', this.bookQuery).then((resp) => {
      this.detailsList = resp.data.list
    })
  }
}
</script>

<style scoped>
* {
  padding: 0;
  margin: 0;
  list-style: none;
}

body {
  background-color: rgb(229 229 229);
}

.teach-study .title {
  width: 44.7em;
  height: 40px;

  background-color: #f3f3f3;
}

.teach-study {
  width: 734px;
  height: 355px;
  position: absolute;
  /*left: 25em;*/
  /*border: solid 1px black;*/
}

.teach-study .title li {
  float: left;
  line-height: 40px;
  margin-left: 0;
}

.teach-study .title li:nth-child(2) {
  float: right;
}

.teach-study .cont li {
  float: left;
  width: 20em;
  height: 12.2em;
  border: solid 1px lightgray;
  padding: 1em;
  padding-right: 20px;
  background: white;
}

/*.teach-study .cont li div{*/
/*  float: left;*/
/*  font-size: 20px;*/
/*}*/
.teach-study .cont li img {
  width: 120px;
  height: 120px;
}

.title2 li {
  float: left;

  line-height: 3em;
}

.title2 li:nth-child(2) {
  float: right;
}

.title2 {
  height: 52px;
  width: 44em;
  padding-top: 0px;
  background: #f3f3f3;
}
</style>